<template>
  <div v-loading="loading"
    element-loading-text="拼命加载中"
    
    class="loadaaa">
    <h1>登陆页面</h1>
    <input type="text" v-model="userInfo.phone" /><br>
    <input type="password" v-model="userInfo.password" /> <br/>
    <button @click="loginHandler(userInfo)">登陆</button>
  </div>
</template>

<script>
//引入请求登陆的接口
import { userLogin } from "../assets/request.js";
//引入辅助函数
import {mapActions}  from "vuex";
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      userInfo: {
        name:"manman",
        phone: "17835696730",
        password: "123456",
      },
    };
  },
  methods: {
   ...mapActions("user",["login"]),
   async loginHandler(userInfo){
    try{ 
      //发送登陆请求
      this.loading=true;
      let res = await userLogin(userInfo)
      //设置用户名,设置登陆态,设置token
      //把用户名传给vuex
      this.login(res.data.result.name);
      sessionStorage.setItem("token",res.data.result.token)
      this.$message({
        message:"成功登陆",
        type:"success",
        duration:800,
      });
      this.loading=false;
      
    }catch(error){
       this.loading = false;
       this.$message({
        message:"登陆失败",
        type:"warning",
        duration:800,
       });
    }
    this.$router.push({
      name:"Index",
    })
   }
  },
};
</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}
.loadaaa{
      margin-top: get(160);
      overflow: hidden;
  //  width: get(1920);
   height: get(600);
   background-color: $color1;
  >h1{
    margin-top: get(140);
    margin-bottom: get(20);
  }
  >input{
    margin-top: get(10);
    margin-bottom: get(4);
    width: get(250);
    height: get(30);
  }
  >button{
    margin-top: get(20);
    width: get(100);
    height: get(40);
    border-radius: get(20);
    border: 1px solid $color;
   &:hover{
    background-color: $color;
    color: #fff;
    border: 1px solid $color;
   }
  }
}
</style>
